<!--
 * @Description: iconfont  symbol 使用组件
 * @Author: Kerwin
 * @Date: 2023-07-01 16:22:48
 * @LastEditTime: 2024-10-24 16:48:03
 * @LastEditors:  Please set LastEditors
-->
<template>
  <svg class="hy-icon svg" :fill="color" :style="{ width, height, filter: `url(#${filter})` }" aria-hidden="true">
    <use :xlink:href="'#' + name"></use>
    <filter id="natural-shadow-filter">
      <feGaussianBlur stdDeviation="12" />
      <feOffset dx="10" dy="10" />
      <feMerge>
        <feMergeNode />
        <feMergeNode in="SourceGraphic" />
      </feMerge>
    </filter>
    <!-- 变成白颜色的filter -->
    <filter id="white-shadow-filter"></filter>
  </svg>
</template>

<script setup lang="ts">
const props = defineProps({
  name: {
    type: String,
    default: ''
  },
  width: {
    type: String,
    default: '60rpx'
  },
  height: {
    type: String,
    default: '60rpx'
  },
  filter: {
    type: String,
    default: ''
  },
  color: {
    type: String
  }
})
</script>

<style lang="scss" scoped></style>
